<!DOCTYPE html>
<html>
<head>
    <style>
        .array-container {
            display: flex;
            align-items: flex-end;
            height: 300px;
            padding: 20px;
            gap: 2px;
        }
        .array-bar {
            width: 30px;
            background-color: #90CAF9;
            transition: all 0.3s;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 5px;
            font-size: 12px;
            color: #333;
        }
    </style>
</head>
<body style="background: #f0f0f0; margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh;">
    <div class="array-container">
        <div class="array-bar" style="height: 30px;">3</div>
        <div class="array-bar" style="height: 220px;">44</div>
        <div class="array-bar" style="height: 190px;">38</div>
        <div class="array-bar" style="height: 25px;">5</div>
        <div class="array-bar" style="height: 235px;">47</div>
        <div class="array-bar" style="height: 75px;">15</div>
        <div class="array-bar" style="height: 180px;">36</div>
        <div class="array-bar" style="height: 130px;">26</div>
        <div class="array-bar" style="height: 135px;">27</div>
        <div class="array-bar" style="height: 10px;">2</div>
        <div class="array-bar" style="height: 230px;">46</div>
        <div class="array-bar" style="height: 20px;">4</div>
        <div class="array-bar" style="height: 95px;">19</div>
        <div class="array-bar" style="height: 250px;">50</div>
        <div class="array-bar" style="height: 240px;">48</div>
    </div>
    <script>
        const bars = document.querySelectorAll('.array-bar');
        let values = Array.from(bars).map(bar => parseInt(bar.textContent));
        
        async function heapify(n, i) {
            let largest = i;
            let left = 2 * i + 1;
            let right = 2 * i + 2;
            
            bars[i].style.backgroundColor = '#FF4081';
            await new Promise(resolve => setTimeout(resolve, 100));
            
            if (left < n) {
                bars[left].style.backgroundColor = '#FF9800';
                await new Promise(resolve => setTimeout(resolve, 100));
            }
            if (right < n) {
                bars[right].style.backgroundColor = '#FF9800';
                await new Promise(resolve => setTimeout(resolve, 100));
            }
            
            if (left < n && values[left] > values[largest]) {
                largest = left;
            }
            if (right < n && values[right] > values[largest]) {
                largest = right;
            }
            
            if (largest !== i) {
                bars[i].style.backgroundColor = '#4CAF50';
                bars[largest].style.backgroundColor = '#4CAF50';
                await new Promise(resolve => setTimeout(resolve, 300));
                
                [values[i], values[largest]] = [values[largest], values[i]];
                [bars[i].style.height, bars[largest].style.height] = 
                [bars[largest].style.height, bars[i].style.height];
                [bars[i].textContent, bars[largest].textContent] = 
                [bars[largest].textContent, bars[i].textContent];
                
                bars[i].style.backgroundColor = '#90CAF9';
                bars[largest].style.backgroundColor = '#90CAF9';
                
                await heapify(n, largest);
            } else {
                if (left < n) bars[left].style.backgroundColor = '#90CAF9';
                if (right < n) bars[right].style.backgroundColor = '#90CAF9';
                bars[i].style.backgroundColor = '#90CAF9';
            }
        }
        
        async function heapSort() {
            // 构建最大堆
            for (let i = Math.floor(values.length / 2) - 1; i >= 0; i--) {
                await heapify(values.length, i);
            }
            
            // 一个个从堆中取出元素
            for (let i = values.length - 1; i > 0; i--) {
                bars[0].style.backgroundColor = '#FF4081';
                bars[i].style.backgroundColor = '#FF4081';
                await new Promise(resolve => setTimeout(resolve, 300));
                
                [values[0], values[i]] = [values[i], values[0]];
                [bars[0].style.height, bars[i].style.height] = 
                [bars[i].style.height, bars[0].style.height];
                [bars[0].textContent, bars[i].textContent] = 
                [bars[i].textContent, bars[0].textContent];
                
                bars[i].style.backgroundColor = '#4CAF50';
                
                await heapify(i, 0);
            }
            
            bars[0].style.backgroundColor = '#4CAF50';
        }

        setTimeout(heapSort, 1000);
        setInterval(() => {
            // 重置颜色和位置
            values = [3,44,38,5,47,15,36,26,27,2,46,4,19,50,48];
            bars.forEach((bar, index) => {
                bar.style.backgroundColor = '#90CAF9';
                bar.style.height = `${values[index] * 5}px`;
                bar.textContent = values[index];
            });
            heapSort();
        }, 15000); // 每15秒重新开始
    </script>
</body>
</html> 